<template>
  <div class="bottom-fixed" v-if="show">
    <footer class="navbar">
      <template v-for="(item, key) in nav">
        <router-link class="nav-item"
          v-if="item.name !== '购物车'"
          :data-key.number="key"
          :to="item.path"
          :key="key"
        >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="'#icon-' +item.icon"></use>
            </svg>
            <span class="text">{{item.name}}</span>
        </router-link>
        <div class="nav-item"
          v-else
          @click.stop.prevent="hideCartList"
          :key="key">
          <div class="cart">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="'#icon-' +item.icon"></use>
            </svg>
            <span class="badge" v-show="total>0">{{total>=100?'...':total}}</span>
            <span class="text">{{item.name}}</span>
          </div>
        </div>
      </template>
    </footer>
    <Shopcart :cartProduct="cartProduct" ref="product" />
  </div>
</template>

<script>
  import Shopcart from './shopcart'
  import config from '@/config'
  // 获取getters
  import { mapGetters } from 'vuex'
  export default {
    name: 'nav',
    props: {
      selectFoods: {
        type: Array,
        default() {
          return [{
            price: 10,
            count: 1
          }]
        }
      }
    },
    data () {
      return {
        // show: 1, // 显示导航栏
        nav: [{icon: 'home', name: '首页', path: '/'},
        {icon: 'cart', name: '购物车', path: '/cart'},
        {icon: 'user', name: '我的', path: '/mine'}],
        active: 0
      }
    },
    beforeCreate() {
      this.$store.dispatch('setCart', 1)
      this.$store.dispatch('setCart', 2)
    },
    computed: {
      ...mapGetters({
        filterNav: 'filterNav',
        cartProduct: 'normalCart',
        free: 'free'
      }),
      total () {
        return this.cartProduct.reduce((total, item) => {
          return total + item.quantity
        }, 0)
      },
      show() {
        let route = this.$route
        return this._display(route.path, route.fullPath)
      }
    },
    methods: {
      switchNav (key) {
        console.log(key)
        this.active = key
      },
      totalCount() {
        let count = 0
        this.selectFoods.forEach(item => {
          count += item.count
        })
        return count
      },
      _productBuy(id) {
        var isFlag = false
        this.cartProduct.forEach((item, key) => {
          if (item.product_id === id) {
            isFlag = true
          }
        })
        if (!isFlag) {
          let curDetailData = this.$store.state.detail.cur
          this.$store.dispatch('addToCart', {productData: curDetailData, type: 1})
        }
      },
      hideCartList() {
        if (this.$route.path === '/detail') {
          this._productBuy(this.$route.query.id)
        }
        this.$store.dispatch('hideCartList')
        console.log(this.free)
      },
      _display(path, fullPath) {
        // 根据路由判断show不show :)
        path = path || this.$route.path
        let flag = config.showNavBar.indexOf(path) >= 0 ? 1 : 0
        if (this.filterNav.length && this.filterNav.indexOf(fullPath) >= 0) {
          flag = 0 // 存在表示不现实
        }
        // this.show = flag
        return flag
      }
    },
    watch: {
      $route: function (route) {
        this._display(route.path, route.fullPath)
      }
    },
    components: {
      Shopcart
    }
  }
  
</script>

<!-- Add "scoped" attribute to limit CSS to this component only  -->
<style lang="scss" scoped>
  @import '../assets/styles/navbar';
</style>
